<template>
  <h3>treeStruc 组件示例</h3>
  <!-- <div class="b h200 w300">
    <f-tree-struc :data="listA" :fieldNames="{ label: 'name', key: 'id', children: 'children' }" />
  </div>
  <div class="b h200 w300">
    <f-tree-struc :data="listB" :fieldNames="{ label: 'name', key: 'id', children: 'children' }" />
  </div>
  <div class="b h400">
    <f-tree-struc :query="apiServe" :fieldNames="{ label: 'name', key: 'id', children: 'children' }" />
    </div> -->

  <f-tree-struc draggable :data="listB" :fieldNames="{ label: 'name', key: 'id', children: 'children' }">
  <!-- <f-tree-struc :query="apiServe" :fieldNames="{ label: 'name', key: 'id', children: 'children' }"> -->
    <!-- <template #item="{data, node}">
      <h3>插槽item: {{ data.name }} {{ node.id }}</h3>
      {{ node }}
    </template> -->
  </f-tree-struc>
</template>

<script setup>

const listA = [
  { id: 1, name: '1-我是目录' },
  { id: 2, name: '2-我是目录' },
  { id: 3, name: '3-我是目录' },
  { id: 4, name: '4-我是目录' },
  { id: 5, name: '5-我是目录' },
  { id: 6, name: '6-我是目录' },
];

const listB = [
  { id: 1, name: '1-我是目录树' },
  {
    id: 2, name: '2-我是目录树', children: [
      {
        id: 21, name: '2.1-张钊-3333', children: [
          { id: 211, name: '2.1.1-我是张钊-3333', children: [
            { id: 2111, name: '2.1.1.1-我是张钊-3333', children: [
              { id: 21111, name: '2.1.1.1.1-我是张钊-3333' },    
            ] },  
            { id: 2112, name: '2.1.1.2-我是张钊-3333', children: [
              { id: 21121, name: '2.1.1.2.1-我是张钊-3333' },
              { id: 21122, name: '2.1.1.2.2-我是张钊-3333', children: [
                { id: 211221, name: '2.1.1.2.2.1' },
                { id: 211222, name: '2.1.1.2.2.2' },    
              ] },
            ] },
          ] },
          { id: 212, name: '2.1.2', children: [
            { id: 2121, name: '2.1.2.1' },
            { id: 2122, name: '2.1.2.2' },
            { id: 2123, name: '2.1.2.3' },
            { id: 2124, name: '2.1.2.4' },
            { id: 2125, name: '2.1.2.5' },
          ] },
          { id: 213, name: '2.1.3' }
        ]
      },
      { id: 22, name: '2.2-张钊-4444' }
    ]
  },
  {
    id: 3, name: '3-我是目录树', children: [
      {
        id: 31, name: '3.1-我是张钊', children: [
          { id: 311, name: '3.1.1-我是张钊-3333' },
          { id: 312, name: '3.1.2-我是张钊-1111' },
        ]
      },
    ]
  }
];

const apiServe = () => new Promise((resolve, reject) => {
  fetch(`base/odcatalogs/queryList`, {
    method: 'post',
    body: JSON.stringify({}),
    headers: { 'Content-Type': 'application/json', 'Accesstoken': window['FokUIOptions'].token() }
  })
    .then(response => response.json())
    .then(res => resolve(res.data))
    .catch(() => reject())
})
</script>

<style lang="scss">
</style>
